<template>
	<i-card top="20rpx" @click="toDetail(item)">
		<view class="order_title">
			<view class="title_name">
				{{item.isOnlinePay === 0 ? '在线订单' : '门店订单'}}
			</view>
			<view v-if="item.isOnlinePay === 0">
				<text class="status" style="color: #8E8E93;">{{rechange_status_type?.find(i => i.value === item.rechangeStatus)?.label }}</text>
			</view>
			<view v-else>
				<text class="status" v-if="item.rechangeStatus ==='10006002' && item.isUse === '1'">待核销</text>
				<text class="status" style="color: #8E8E93;"
					v-else-if="item.rechangeStatus ==='10006002' && item.isUse === '0'">已完成</text>
				<text class="status"
					v-else>{{rechange_status_type?.find(i => i.value === item.rechangeStatus)?.label }}</text>
			</view>

		</view>
		<view class="order_bot">
			<view class="bot_left">
				<text class="timer" style="margin-bottom: 16rpx;">手机号：{{mobileEncryption(item.userMobile)}}</text>
				<text class="timer">时间：{{item.createTime}}</text>
			</view>
			<i-price>{{item.realAmount}}</i-price>
		</view>
		<view class="text">
			<text v-for="(i,v) in item.childOrders" :key="v">{{i.serviceName}}</text>
		</view>
	</i-card>
</template>

<script lang="ts" setup>
	import {
		computed,
		defineProps,
		onMounted
	} from 'vue'
	import { navTo, mobileEncryption } from '../../utils/common';
	import useStore from '../../stores/index'

	const store = useStore()

	const props = defineProps({
		item: {
			type: Object,
			default: () => { return {} }
		}
	})

	const rechange_status_type = computed(() => {
		return store.dictTypes['rechange_status_type']
	})

	const toDetail = (item : { merOrderId : string }) => {
		navTo('/pages/orderDetail/storeSelf_detail?merOrderId=' + item.merOrderId, 'navigateTo')
	}
</script>

<style lang="scss" scoped>
	.order_title {
		width: 100%;
		@include flexRS;
		@include dfont;
		margin-bottom: 16rpx;

		.title_name {
			max-width: 70%;
			@include titlefont(28rpx);
			@include overflow;
		}

		.status {
			color: #A0A0AD;
		}
	}

	.order_bot {
		@include dfont;
		@include flexRS;
		align-items: flex-end;
		font-weight: 500;
		border-bottom: 1rpx solid #F0F0F2;
		padding-bottom: 34rpx;

		.bot_left {
			@include flexC;

			.timer {
				margin-bottom: 8rpx;
			}

		}
	}

	.text {
		margin-top: 32rpx;

		text {
			line-height: 48rpx;
			margin-right: 32rpx;
		}

	}

	text {
		@include dfont(26rpx);
		color: #8E8E93;
	}
</style>